<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区块随光标移动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 200px;
        }

        .box1 {
            position: absolute;
            width: 100px;
            height: 50px;
            background-color: salmon;
            color: white;
            line-height: 50px;
            text-align: center;
            /* 鼠标事件不起作用 */
            pointer-events: none;
            display: none;
        }
    </style>
    <!-- 
          区块随光标移动效果
        分析: 
           提示信息区块随光标移动实现思路:
             核心：  1. 获取光标当前坐标位置
                    2. 将当前坐标位置赋值给提示信息区块

            问题:
              1.如何让提示信息区块移动?
                定位布局 改变top left
              2. 大区块相对定位置限制提示信息区块  

              3. 解决光标闪烁问题
                 原因: 光标移入提示信息区块后，大区块的鼠标移动事件失效,
                 让光标移入提示信息区块后，提示信息区块鼠标事件不起作用，起作用的还是大区块 
                   给提示信息区块加上css  ->  pointer-events: none;
              
             4. 获取元素尺寸,宽高
                window.getComputedStyle(元素).width  内容
                offsetWidth  内容+ padding+border
                clientWidth   内容+padding

             5. 边界处理

             6. 提示信息移入大区块显示，移出隐藏
               

     -->
</head>

<body>
    <div class="box">
        <p class="box1">这是提示信息</p>
    </div>

    <script>
        //移动事件事件源是谁?
        // 移动在大区块移动，
        var box = document.querySelector('.box')
        var box1 = document.querySelector('.box1')
        
        // 鼠标移动事件
        box.onmousemove = function (e) {
            // 获取事件对象
            e = e || window.event
            var x = e.offsetX - box1.offsetWidth / 2
            var y = e.offsetY - box1.offsetHeight / 2

            // 左边界检查
            if (x < 0) {
                x = 0
            }
            // 右边界检查
            // 当x大于大区块宽-提示信息区块宽，表示移出大区块
            if (x > (box.offsetWidth - box1.offsetWidth)) {
                x = box.offsetWidth - box1.offsetWidth
            }
            //上边界检查
            if (y < 0) {
                y = 0
            }
            //下边界检查
            if (y > (box.offsetHeight - box1.offsetHeight)) {
                y = box.offsetHeight - box1.offsetHeight
            }
            box1.style.left = x + 'px'
            box1.style.top = y + 'px'
        }

        //鼠标移入事件
        box.onmouseover = function () {
            box1.style.display = 'block'
        }
        //鼠标移出事件
        box.onmouseout = function () {
            box1.style.display = 'none'
        }
    </script>
</body>

</html>